<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片上 */
			.box1{
				width: 1000px;
				height: 500px;
				
				background: url(img/哪吒_爱给网_aigei_com.png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				
			}
			.box2{
				width: 1000px;
				height:1000px;
				
				background: url(img/哪吒1_爱给网_aigei_com.png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对与父级元素定位
		          功能：单一元素定位，元素在正常文档流中，推荐
				possition属性：relative; 声明元素可以用相对定位意义
				         方向属性：left、right、top、bottom
						 z轴堆叠顺序属性：z-index
						        属性值数值，数值越大，越靠前
						绝对定位   定位祖先【页面左上角】进行定位
						功能：脱离文档流，不占据原来空间
						position属性：absolute;声明文件可以使用绝对定
                        
						实际开发中：相对定位结合绝对定位一起使用
						           侧边栏、左栏、遮罩层【挂靠】
						案例：左栏弹出【html结构，语义化标签+css两种定位+js】
						
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>